
<template>
    <template v-if="props.item?.meta?.hidden">
        <template v-if="props.item?.children">
            <Tree2  :item="item2" v-for="item2 in props.item.children" :resolve="resolve"></Tree2>
        </template>
        
    </template>
    <template v-else>
        <el-menu-item :index="resolve" v-if="!props.item.children">
            <el-icon v-if="props.item?.meta?.icon">
                <component :is="props.item.meta.icon"></component>
            </el-icon>
            <template #title>{{ props.item.meta.title }}</template>
        </el-menu-item>
        <el-sub-menu :index="resolve" v-if="props.item.children">
            <template #title>
                <el-icon v-if="props.item.meta.icon">
                    <component :is="props.item.meta.icon"></component>
                </el-icon>
                <span>{{ props.item.meta.title }}</span>
            </template>
            <Tree2 :item="item2" v-for="item2 in props.item.children" :resolve="resolve"></Tree2>
        </el-sub-menu>
    </template>

</template>

<script setup>
import { computed } from 'vue';
const props = defineProps(['item', "resolve"]);
const resolve = computed(() => {
    return (props.resolve + '/' + props.item.path).replace('///', '/').replace('//', '/')
})

</script>
<script>
export default {
    name: "Tree2"
}
</script>
<style lang="scss" scoped>

</style>